<template>
  <view class="charts">
    <!-- 全部交易额 -->
    <view class="charts__money">
      <view class="charts__title">
        <view class="charts__left">
          <image
            src="/static/image/benefit/icon_trans_profit.png"
            mode=""
            class="charts__tip"
          ></image>
          全部交易额(万元)
        </view>
        <view style="width: 200rpx" class="charts__tab">
          <!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :show-bar="false"
						active-color="#9D60FF" bg-color="transparent" height="60"></u-tabs> -->
          <u-subsection
            :list="list"
            :current="moneySectionCurrent"
            active-color="#9D60FF"
            mode="subsection"
            font-size="18"
            @change="moneySectionChange"
          ></u-subsection>
        </view>
      </view>
      <qiun-data-charts
        type="line"
        :opts="opts"
        :chartData="tradeChartData"
        class="charts__column"
      />
    </view>
    <!-- 商户激活数 -->
    <view class="charts__merchants">
      <view class="charts__title">
        <view class="charts__left">
          <image
            src="/static/image/benefit/icon_trans_profit.png"
            mode=""
            class="charts__tip"
          ></image>
          商户激活数(个)
        </view>
        <view style="width: 200rpx" class="charts__tab">
          <u-subsection
            :list="list"
            :current="activeSectionCurrent"
            active-color="#9D60FF"
            mode="subsection"
            font-size="18"
            @change="activeSectionChange"
          ></u-subsection>
        </view>
      </view>
      <qiun-data-charts
        type="line"
        :opts="opts"
        :chartData="chartData"
        class="charts__column"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      tradeChartData: {},
      opts: {
        color: [
          '#9D60FF',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4',
          '#ea7ccc',
        ],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2,
        },
        extra: {
          line: {
            type: 'curve',
            width: 2,
            activeType: 'solid',
          },
        },
      },
      list: [
        {
          name: '近7天',
        },
        {
          name: '半年',
        },
      ],
      moneySectionCurrent: 0,
      activeSectionCurrent: 0,
      current: 0,
      data: {
        trendType: 1,
      },
      activeData: {
        trendType: 1,
      },
    };
  },
  // 页面显示时触发
  onShow() {
    this.getServerData();
    this.getActiveData();
  },
  mounted() {
    this.getServerData();
    this.getActiveData();
  },
  methods: {
    // 全部交易额
    moneySectionChange(index) {
      this.moneySectionCurrent = index;
      this.data.trendType = index + 1;
      this.getServerData();
    },
    // 商户激活数
    activeSectionChange(index) {
      this.activeSectionCurrent = index;
      this.activeData.trendType = index + 1;
      this.getActiveData();
    },
    change(index) {
      this.current = index;
    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      let categories = [],
        series = [];
      const _let = this;
      this.$zx.order_api.getOrderList(this.data).then((data) => {
        console.log('getOrderList----->154', data);
        data.forEach(function (item, index, array) {
          categories.push(item.date);
          series.push(item.amount);
          let res = {
            categories: categories,
            series: [
              {
                name: '交易额',
                data: series,
              },
            ],
          };
          _let.tradeChartData = JSON.parse(JSON.stringify(res));
        });
      });
    },
    getActiveData() {
      //模拟从服务器获取数据时的延时
      let categories = [],
        series = [];
      const _let = this;
      this.$zx.order_api.merchantActiveTrend(this.activeData).then((data) => {
        console.log('merchantActiveTrend----->177', data);
        data.forEach(function (item, index, array) {
          categories.push(item.date);
          series.push(item.total);
          let res = {
            categories: categories,
            series: [
              {
                name: '激活数',
                data: series,
              },
            ],
          };
          _let.chartData = JSON.parse(JSON.stringify(res));
        });
      });
    },
  },
};
</script>

<style lang="scss">
.charts {
  width: 100%;
  height: 600rpx;
  font-size: 32rpx;
  &__title {
    display: flex;
    padding: 15rpx;
    align-items: center;
  }
  &__tip {
    width: 30rpx;
    height: 30rpx;
  }
  &__left {
    flex: 2;
  }
  // &__tab {
  // }
  &__column {
    background-color: white;
  }
  &__merchants {
    padding-bottom: 150rpx;
  }
}
</style>
